<template>
    <div class="w-full h-full flex">
        <div class="flex-1">
            <transition appear enter-active-class="animated fadeIn" leave-active-class="animated fadeOut">
                <section class="bg-gray-50 dark:bg-gray-900" v-if="!showRegister">
                    <div class="flex flex-col items-center justify-center px-6 py-8 mx-auto md:h-screen lg:py-0">
                        <a class="flex items-center mb-6 text-2xl font-semibold text-gray-900 dark:text-white">
                            welcome !!!
                        </a>
                        <div
                            class="w-full bg-white rounded-lg shadow dark:border md:mt-0 sm:max-w-md xl:p-0 dark:bg-gray-800 dark:border-gray-700">
                            <div class="p-6 space-y-4 md:space-y-6 sm:p-8">
                                <h1
                                    class="text-xl font-bold leading-tight tracking-tight text-gray-900 md:text-2xl dark:text-white">
                                    登陆
                                </h1>
                                <div class="space-y-4 md:space-y-6">
                                    <div>
                                        <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
                                            用户名
                                        </label>
                                        <input v-model="username" name="username" id="username_login"
                                            class="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
                                            placeholder="username" required="">
                                    </div>
                                    <div>
                                        <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">密码
                                        </label>
                                        <input v-model="password" type="password" name="password" id="password_login"
                                            placeholder="••••••••"
                                            class="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
                                            required="">
                                    </div>
                                    <button @click="() => { LogIn() }" class="w-full text-white  bg-blue-600 hover:bg-blue-700 focus:ring-4 
                                    focus:outline-none focus:ring-primary-300 font-medium rounded-lg text-sm 
                                    px-5 py-2.5 text-center
                                     dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800">
                                        登录
                                    </button>
                                    <p class="text-sm font-light text-gray-500 dark:text-gray-400">
                                        没有账号？ <a @click="() => { showRegister = !showRegister }"
                                            class="font-medium text-primary-600 hover:underline dark:text-primary-500">
                                            去注册
                                        </a>
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>
            </transition>
        </div>
        <div class="flex-1">
            <transition appear enter-active-class="animated fadeIn" leave-active-class="animated fadeOut">
                <section class="bg-gray-50 dark:bg-gray-900" v-if="showRegister">
                    <div class="flex flex-col items-center justify-center px-6 py-8 mx-auto md:h-screen lg:py-0">
                        <a href="#" class="flex items-center mb-6 text-2xl font-semibold text-gray-900 dark:text-white">
                            welcome !!!
                        </a>
                        <div
                            class="w-full bg-white rounded-lg shadow dark:border md:mt-0 sm:max-w-md xl:p-0 dark:bg-gray-800 dark:border-gray-700">
                            <div class="p-6 space-y-4 md:space-y-6 sm:p-8">
                                <h1
                                    class="text-xl font-bold leading-tight tracking-tight text-gray-900 md:text-2xl dark:text-white">
                                    创建账号
                                </h1>
                                <div class="space-y-4 md:space-y-6">
                                    <div>
                                        <label for="email"
                                            class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
                                            邮箱
                                        </label>
                                        <input v-model="email" type="email" name="email" id="email"
                                            class="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
                                            placeholder="name@company.com" required="">
                                    </div>
                                    <div>
                                        <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
                                            用户名
                                        </label>
                                        <input v-model="username"
                                            class="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
                                            placeholder="username" required="">
                                    </div>
                                    <div>
                                        <label for="password"
                                            class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">密码</label>
                                        <input type="password" name="password" id="password" placeholder="••••••••"
                                            class="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
                                            required="" v-model="password">
                                    </div>
                                    <div>
                                        <label for="confirm-password"
                                            class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">确认密码</label>
                                        <input type="password" name="confirm-password" id="confirm-password"
                                            placeholder="••••••••"
                                            class="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
                                            required="" v-model="confirmaPassword">
                                    </div>
                                    <button @click="() => { createUser() }"
                                        class="w-full text-white bg-blue-600 hover:bg-blue-700 focus:ring-4 focus:outline-none focus:ring-primary-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800">
                                        注册账号
                                    </button>
                                    <p class="text-sm font-light text-gray-500 dark:text-gray-400">
                                        已有账号？ <a @click="() => { showRegister = !showRegister }"
                                            class="font-medium text-primary-600 hover:underline dark:text-primary-500">
                                            登陆
                                        </a>
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>
            </transition>
        </div>
    </div>
</template>
<script setup>
import { ref } from "vue"
import { useRoute, useRouter } from "vue-router";
import { useQuasar } from 'quasar'
import { createAccount, LoginAccount } from "src/boot/login/login";
const $q = useQuasar()
const showRegister = ref(true)
const username = ref('')
const email = ref('')
const password = ref('')
const confirmaPassword = ref('')
const router = useRouter()
const LogIn = () => {
    LoginAccount({ username: username.value, password: password.value }).then(res => {
        let data = res.data.data;
        if (data.length <= 0) {
            $q.notify({
                message: '用户名或者密码错误',
                type: 'negative',
                position: 'top'
            })

            return
        } else {
            $q.notify({
                message: '登录成功',
                type: 'positive',
                position: 'top'
            })
            localStorage.setItem('token', data[0].token)
            localStorage.setItem('username', data[0].username)
            localStorage.setItem('role', data[0].role)
            localStorage.setItem('email', data[0].email)
            localStorage.setItem('password', data[0].password)
            localStorage.setItem('user_id', data[0].id)
            if (data[0].role === 'admin') {
                router.push({ name: 'adminIndex' })
                return
            }
            router.push({ name: 'index' })
            return
        }
    })
}

const createUser = () => {
    if (confirmaPassword.value != password.value) {
        $q.notify({
            message: '密码不一致',
            type: 'negative',
            position: 'top'
        })
        return;
    }
    createAccount({ username: username.value, password: password.value, email: email.value, role: 'user' }).then(res => {
        let data = res.data
        if (data.code === 200) {
            $q.notify({
                message: '成功',
                type: 'positive',
                position: 'top'
            })
        } else {
            $q.notify({
                message: '用户名或者密码错误',
                type: 'negative',
                position: 'top'
            })
        }
    })
}

</script>